<template>
  <el-dialog :model-value="visible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" width="440">
    <el-form :model="form">
      <el-form-item label="学员姓名" label-width="100px">
        <el-input v-model="form.name" placeholder="请输入学员姓名" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机号码" label-width="100px" v-if="!form.id">
        <el-input v-model="form.phoneNo" type="number" placeholder="请输入手机号码" autocomplete="off" />
      </el-form-item>
      <el-form-item label="身份证人像面" label-width="100px">
        <div class="avatar-uploader" v-if="form.idFrontImg" style="margin-right: 8px;">
          <el-image :src="form.idFrontImg" class="avatar" fit="cover" :preview-src-list="[form.idFrontImg]"></el-image>
        </div>
        <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" name="files" accept="image/*"
          :show-file-list="false" :on-success="idFrontImgSuccess">
          <el-icon class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="" label-width="100px">
        <el-select v-model="form.idFrontImgStatus" placeholder="请选择状态" style="width: 100%">
          <el-option v-for="item in statusArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="身份证国徽面" label-width="100px">
        <div class="avatar-uploader" v-if="form.idBackImg" style="margin-right: 8px;">
          <el-image :src="form.idBackImg" class="avatar" fit="cover" :preview-src-list="[form.idBackImg]"></el-image>
        </div>
        <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" name="files" accept="image/*"
          :show-file-list="false" :on-success="idBackImgSuccess">
          <el-icon class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="" label-width="100px">
        <el-select v-model="form.idBackImgStatus" placeholder="请选择状态" style="width: 100%">
          <el-option v-for="item in statusArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="健康证明" label-width="100px">
        <div class="avatar-uploader" v-if="form.medicalCert" style="margin-right: 8px;">
          <el-image :src="form.medicalCert" class="avatar" fit="cover"
            :preview-src-list="[form.medicalCert]"></el-image>
        </div>
        <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" name="files" accept="image/*"
          :show-file-list="false" :on-success="medicalCertSuccess">
          <el-icon class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="" label-width="100px">
        <el-select v-model="form.medicalCertStatus" placeholder="请选择状态" style="width: 100%">
          <el-option v-for="item in statusArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="学历证明" label-width="100px">
        <div class="avatar-uploader" v-if="form.diplomaCert" style="margin-right: 8px;">
          <el-image :src="form.diplomaCert" class="avatar" fit="cover"
            :preview-src-list="[form.diplomaCert]"></el-image>
        </div>
        <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" name="files" accept="image/*"
          :show-file-list="false" :on-success="diplomaCertSuccess">
          <el-icon class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="" label-width="100px">
        <el-select v-model="form.diplomaCertStatus" placeholder="请选择状态" style="width: 100%">
          <el-option v-for="item in statusArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="大头证件照" label-width="100px">
        <div class="avatar-uploader" v-if="form.headShot" style="margin-right: 8px;">
          <el-image :src="form.headShot" class="avatar" fit="cover" :preview-src-list="[form.headShot]"></el-image>
        </div>
        <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" name="files" accept="image/*"
          :show-file-list="false" :on-success="headShotSuccess">
          <el-icon class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="" label-width="100px">
        <el-select v-model="form.headShotStatus" placeholder="请选择状态" style="width: 100%">
          <el-option v-for="item in statusArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelFn">取消</el-button>
        <el-button type="primary" @click="confirmFn">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  forms: {
    type: Object
  }
})
const form = props.forms;
const statusArr = ref([{
  value: 0,
  label: '未提交'
}, {
  value: 1,
  label: '驳回'
}, {
  value: 2,
  label: '通过'
}])
// 取消
const emit = defineEmits()
const cancelFn = () => {
  emit('pick', { visible: false })
}
// 上传后
function idFrontImgSuccess({ errno, errmsg, result }) {
  if (errno === 0) {
    form.idFrontImg = result[0];
    form.idFrontImgStatus = 2;
    return false
  }
}
function idBackImgSuccess({ errno, errmsg, result }) {
  if (errno === 0) {
    form.idBackImg = result[0];
    form.idBackImgStatus = 2;
    return false
  }
}
function medicalCertSuccess({ errno, errmsg, result }) {
  if (errno === 0) {
    form.medicalCert = result[0];
    form.medicalCertStatus = 2;
    return false
  }
}
function diplomaCertSuccess({ errno, errmsg, result }) {
  if (errno === 0) {
    form.diplomaCert = result[0];
    form.diplomaCertStatus = 2;
    return false
  }
}
function headShotSuccess({ errno, errmsg, result }) {
  if (errno === 0) {
    form.headShot = result[0];
    form.headShotStatus = 2;
    return false
  }
}
// 确认
const confirmFn = () => {
  emit('pick', { visible: false, form })
}
</script>

<style lang="less" scoped>
.avatar-uploader {
  border: 1px solid #DCDFE6;
  border-radius: 3px;
  background: #FFFFFF;

  &:hover {
    border-color: #C0C4CC;
  }

  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }

  .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #D6D6D6;
    width: 148px;
    height: 148px;
    text-align: center;

    &:hover {
      color: #C0C4CC;
    }
  }
}
</style>